<template>
  <div>
    <Add ref="add" @ok="search"></Add>
    <Update ref="update" @ok="search"></Update>
    <Batch ref="batch" @ok="search"></Batch>
    <Info ref="info"></Info>
    <a-card>
      <Operation
        showBatchBtns
        showModeBtn
        :btns="btns"
        class="mb10"
        @add="toAdd"
        @batchClick="batchClick"
        @search="handleSearch"
        @changeMode="handleChangeMode">
      </Operation>
      <div class="wfull scroll">
        <table v-show="listMode" class="table">
          <tr class="head">
            <td class="w40"><a-checkbox v-model="ckAll" @change="ckAllChange"></a-checkbox></td>
<#list proList as pro>
<#if pro.listShow>
            <td>${pro.column.comment}</td>
</#if>
</#list>
            <td class="w160">操作</td>
          </tr>
          <tr v-for="obj in list" :key="`obj`+obj.id">
            <td><a-checkbox v-model="obj.ck" @change="ckChange"></a-checkbox></td>
<#list proList as pro>
<#if pro.listShow>
<#if pro.formType=="switch">
            <td>{{ obj.${pro.name}?'是':'否' }}</td>
<#elseif pro.formType=="dic">
            <td><DicHolder :code="obj.${pro.name}"/></td>
<#elseif pro.formType=="date">
            <td>{{ obj.${pro.name} }}</td>
<#elseif pro.formType=="datetime">
            <td>{{ obj.${pro.name} }}</td>
<#elseif pro.formType=="time">
            <td>{{ obj.${pro.name} }}</td>
<#elseif pro.formType=="tags">
            <td><TagViewer :array="JSON.parse(obj.${pro.name})"></TagViewer></td>
<#elseif pro.formType=="img">
            <td><ImgHolder :width="160" :src="obj.${pro.name}"/></td>
<#elseif pro.formType=="imgs">
            <td><Banner :mode="1" v-if="obj.${pro.name}" :imgs="JSON.parse(obj.${pro.name})"/></td>
<#elseif pro.formType=="banner">
            <td><Banner v-if="obj.${pro.name}" :imgs="JSON.parse(obj.${pro.name})"/></td>
<#elseif pro.formType=="select"||pro.formType=="radio">
            <td>{{ getOptLabel(dic.${pro.name}Opts, obj.${pro.name}) }}</td>
<#elseif pro.formType=="checkbox">
            <td><TagViewer :array="getOptLabels(dic.${pro.name}Opts, obj.${pro.name})"></TagViewer></td>
<#elseif pro.formType=="tinymce">
            <td><div class="w160 h120" v-html="genHtml(obj.${pro.name})"></div></td>
<#else>
            <td>{{ obj.${pro.name} }}</td>
</#if>
</#if>
</#list>
            <td>
              <div class="w120">
                <div class="btn-circle" @click="toInfo(obj)">
                  <i class="fa fa-search"></i>
                </div>
                <div class="btn-circle" @click="del(obj)">
                  <i class="fa fa-trash"></i>
                </div>
                <div class="btn-circle" @click="toUpdate(obj)">
                  <i class="fa fa-pencil"></i>
                </div>
              </div>
            </td>
          </tr>
        </table>
        <div class="pd24 bor-border-1" v-show="!listMode">
          <a-row :gutter="15">
            <a-col span="24">
              <div class="pd10"><a-checkbox v-model="ckAll" @change="ckAllChange">全选</a-checkbox></div>
            </a-col>
            <viewer :images="[]">
              <a-col v-for="obj in list" :key="`block`+obj.id" span="6">
                <div class="card">
                  <ImgHolder src="" :height="200"></ImgHolder>
                  <div class="pd15">
                    <table>
  <#list proList as pro>
  <#if pro.listShow>
  <#if pro.formType=="select"||pro.formType=="radio"||pro.formType=="multiple"||pro.formType=="checkbox">
                      <tr><td style="width:80px;">${pro.column.comment}</td><td>{{ getOptLabel(dic.${pro.name}Opts, obj.${pro.name}) }}</td></tr>
  <#elseif pro.formType=="dic">
                      <tr><td style="width:80px;">${pro.column.comment}</td><td><DicHolder :code="obj.${pro.name}"/></td></tr>
  <#else>
                      <tr><td style="width:80px;">${pro.column.comment}</td><td>{{ obj.${pro.name} }}</td></tr>
  </#if>
  </#if>
  </#list>
                    </table>
                  </div>
                  <div class="foot">
                    <a-row>
                      <a-col span="6" class="tal" style="padding-left:10px;">
                        <a-checkbox v-model="obj.ck" @change="ckChange"></a-checkbox>
                      </a-col>
                      <a-col span="18" class="tar">
                        <div class="btn-circle" @click="toInfo(obj)">
                          <i class="fa fa-search"></i>
                        </div>
                        <div class="btn-circle" @click="del(obj)">
                          <i class="fa fa-trash"></i>
                        </div>
                        <div class="btn-circle" @click="toUpdate(obj)">
                          <i class="fa fa-pencil"></i>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </a-col>
            </viewer>
          </a-row>
        </div>
      </div>
      <Page :total="total" :pageSizeInit="pageSize" @change="onPageChange"></Page>
    </a-card>
  </div>
</template>

<script>
import Add from './Add'
import Update from './Update'
import Batch from './Batch'
import Info from './Info'
import { dic } from './dic'
import { pageMixin } from '@/core/page-mixin'
export default {
  mixins: [pageMixin],
  components: {
    Add, Update, Batch, Info
  },
  data () {
    return {
      dic,
      btns: [
        { key: 1, name: '删除', icon: 'fa-remove' },
        { key: 2, name: '编辑', icon: 'fa-pencil' }
      ]
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search () {
      this.$http.get('${baseMapping}/page', {
        searchStr: this.searchStr,
        page: this.page,
        pageSize: this.pageSize
      }, data => {
        this.ckAll = false
        this.total = data.total
        this.list = data.list.map((t) => {
          t.ck = false
          return t
        })
      })
    },
    toInfo (obj) {
      this.$refs.info.init(JSON.stringify(obj))
      this.$refs.info.show(obj)
    },
    batchClick (index) {
      if (index === 1) {
        this.batchDel()
      } else if (index === 2) {
        this.toBatchUpdate()
      }
    },
    toAdd () {
      this.$refs.add.init()
      this.$refs.add.show()
    },
    toUpdate (obj) {
      this.$refs.update.init(JSON.stringify(obj))
      this.$refs.update.show()
    },
    del (obj) {
      this.confirm(() => {
        this.$http.post('${baseMapping}/del', { ids: obj.id }, data => {
          this.search()
        })
      })
    },
    batchDel () {
      this.checkIds(ids => {
        this.$http.post('${baseMapping}/del', { ids: ids.join(',') }, data => {
          this.search()
        })
      })
    },
    toBatchUpdate () {
      this.checkIds(ids => {
        this.$refs.batch.init(ids)
        this.$refs.batch.show()
      }, '确定要批量编辑所选择的记录么')
    }
  }
}
</script>
<style lang="less" scoped>
</style>
